<script>
export default {
  name: "animatePage",
  data() {
    return {
      flag: true,
      list: [
        1, 2, 3, 4, 5, 6
      ]
    }
  },

  methods: {
    // 定义三个 methods 钩子方法
    beforeEnter(el) { // 动画进入之前的回调
      el.style.transform = 'translateX(500px)';
    },
    enter(el, done) { // 动画进入完成时候的回调
      el.offsetWidth;
      el.style.transform = 'translateX(0px)';
      done();
    },
    afterEnter(el) { // 动画进入完成之后的回调
      this.flag = !this.flag;
      console.log(el)
    },
    change() {
      // this.list.push(7)
      this.list.pop()
    }
  }
}
</script>

<template>
  <div>
    动画
    <button @click="flag=!flag">点击显示</button>
    <transition>
      <div class="box" v-show="!flag">这是元素</div>
    </transition>

    <!--   类名：自定义动画名-->
    <transition name="ani">
      <div class="box" v-show="!flag">这是元素ani</div>
    </transition>

    <!--    使用外部css库  animate.css-->
    <transition
        enter-active-class="animate__animated animate__fadeInRightBig"
        leave-active-class="animate__animated animate__zoomOutUp">
      <div class="animated" v-show="!flag">动画哦</div>
    </transition>

    <!--    使用钩子函数 函数形式-->
    <transition
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter">
      <div v-show="!flag" class="show">OK</div>
    </transition>


    <!-- 列表过渡-->
    <!-- <transition>里只能包住一个，多的话要使用<transition-group> -->
    <button @click="change">change</button>
    <transition-group>
      <p v-for="(item,index) in list" :key="index">{{ item }}</p>
    </transition-group>
  </div>
</template>

<style scoped lang="less">
.box {
  width: 300px;
  height: 200px;
  background-color: antiquewhite;
}

.v-enter {
  transform: translateX(-300px);
}

.v-enter-to {
  transform: translateX(0);
}

.v-enter-active {
  transition: transform 3s;
}

.v-leave {
  transform: translateX(0px) rotate(0deg);
}

.v-leave-to {
  transform: translateX(300px) rotate(360deg);
}

.v-leave-active {
  transition: transform 3s;
}

.ani-enter {
  transform: translateX(-300px) scale(1.5, 1.5);
}

.ani-enter-to {
  transform: translateX(0) scale(1, 1);
}

.ani-enter-active {
  transition: transform 3s;
}

.ani-leave {
  transform: translateX(0px) rotate(0deg);
}

.ani-leave-to {
  transform: translateX(300px) rotate(360deg);
}

.ani-leave-active {
  transition: transform 3s;
}

</style>